📚 Tutorial Lengkap

Sistem Aplikasi Pendidikan Digital Terintegrasi

đŸ‘Ĩ Tim Pengembang

Sugeng Mardiyanto Lead Developer
Rosdiana Amini Co-Developer
Wahyudi Utomo Co-Developer

đŸĢ Institusi

SMA Laboratorium UM

SMAN 1 Widodaren Ngawi

Tahun Pengembangan: 2025

📝 Smart Exam Manager

v5.1 FIXED

Sistem Manajemen Ujian Digital yang Komprehensif

1

Persiapan Awal

Sebelum memulai, pastikan Anda sudah memiliki file https://bit.ly/SMART_TEACHER_APPS yang merupakan aplikasi Smart Exam Manager.

ℹī¸ Yang Anda Butuhkan:

  • Browser modern (Chrome, Firefox, Edge, atau Safari)
  • File HTML aplikasi Smart Exam Manager
  • Soal ujian yang sudah disiapkan (bisa dalam bentuk teks atau CSV)
  • Gambar soal (opsional, jika soal memerlukan ilustrasi)
Tampilan awal Smart Exam Manager dengan header berwarna ungu gradasi
2

Membuka Aplikasi

  1. Klik kanan pada file https://bit.ly/SMART_TEACHER_APPS
  2. Pilih "Open with" → Pilih browser favorit Anda
  3. Aplikasi akan terbuka di browser
  4. Anda akan melihat halaman utama dengan menu navigasi di bagian atas

✅ Tanda Aplikasi Berhasil Dibuka:

Anda akan melihat:

  • Header dengan judul "Smart Exam Manager"
  • Navigasi dengan tombol Home, Teacher, dan Dashboard
  • Area "Save & Load Your Work" berwarna hijau
  • Section "Exam Settings" dan "Add Questions"
3

Mengisi Informasi Ujian

Sebelum menambahkan soal, lengkapi informasi dasar ujian:

📄 Exam Title

Masukkan judul ujian, contoh: "Ujian Tengah Semester Matematika"

⏱ī¸ Duration

Tentukan durasi ujian dalam menit, contoh: 90 menit

🎓 Class/Grade

Isi kelas yang akan ujian, contoh: "XI IPA 1"

💡 Tips:

Isikan informasi dengan jelas dan detail. Informasi ini akan muncul di file ujian siswa dan hasil QR Code.

4

Metode Menambahkan Soal

Smart Exam Manager menyediakan 2 metode input soal:

A. Bulk Upload (CSV) - Untuk Banyak Soal

Metode ini cocok jika Anda sudah memiliki banyak soal dalam format spreadsheet.

  1. Download Template CSV:
    • Klik tab "Bulk Upload (CSV)"
    • Klik tombol "đŸ“Ĩ Download CSV Template"
    • File template akan terdownload
  2. Isi Template:
    • Buka file CSV dengan Excel atau Google Sheets
    • Isi kolom sesuai format yang ada
    • Simpan file setelah selesai
Kolom Keterangan Contoh
Question Teks soal Berapa hasil dari 5 + 3?
Option_A Pilihan jawaban A 6
Option_B Pilihan jawaban B 7
Option_C Pilihan jawaban C 8
Option_D Pilihan jawaban D 9
Option_E Pilihan jawaban E 10
Correct_Answers Jawaban benar (bisa lebih dari 1, pisahkan dengan koma) C atau A,C (untuk multiple correct)
Image_Filename Nama file gambar (opsional) soal1.jpg atau kosongkan

B. Manual Entry - Untuk Sedikit Soal

Metode ini cocok untuk menambahkan soal satu per satu dengan interface yang mudah.

  1. Klik tab "✏ī¸ Manual Entry"
  2. Ketik teks soal di area "Question Text"
  3. Upload gambar jika diperlukan (opsional)
  4. Isi 5 opsi jawaban (A, B, C, D, E)
  5. Centang checkbox di depan jawaban yang benar
  6. Klik "➕ Add Question"

⚠ī¸ Perhatian:

Anda bisa mencentang lebih dari 1 checkbox untuk soal dengan multiple correct answers (jawaban benar lebih dari satu).

5

Upload Gambar untuk Soal (Opsional)

Jika soal Anda memerlukan gambar (diagram, grafik, ilustrasi):

Untuk Bulk Upload:

  1. Di section "📸 Upload Question Images", klik "Choose Files"
  2. Pilih semua gambar yang akan digunakan (bisa multiple selection)
  3. Klik "📤 Upload Images"
  4. Tunggu hingga muncul konfirmasi "✅ Successfully uploaded X image(s)"
  5. Di file CSV, tulis nama file gambar di kolom Image_Filename

Untuk Manual Entry:

  1. Di form manual entry, ada field "Question Image (Optional)"
  2. Klik "Choose File" dan pilih gambar
  3. Preview gambar akan muncul
  4. Lanjutkan mengisi soal seperti biasa

ℹī¸ Format Gambar yang Didukung:

  • JPG / JPEG
  • PNG
  • GIF
  • Ukuran maksimal: 5MB per gambar
6

Upload dan Preview CSV

Setelah template CSV diisi:

  1. Upload CSV File:
    • Scroll ke section "Upload CSV File"
    • Klik tombol "📁 Choose CSV File"
    • Pilih file CSV yang sudah Anda isi
  2. Preview Otomatis:
    • Sistem akan otomatis memproses file
    • Muncul preview semua soal yang akan diimport
    • Periksa setiap soal dengan teliti
  3. Konfirmasi Import:
    • Jika semua benar, klik "✅ Import All Questions"
    • Jika ada kesalahan, klik "❌ Cancel" dan perbaiki file CSV

✅ Validasi Otomatis:

Sistem akan otomatis mengecek:

  • Apakah semua kolom wajib terisi
  • Apakah format jawaban benar valid (A, B, C, D, atau E)
  • Apakah gambar yang direferensikan sudah diupload
  • Jika ada error, akan muncul pesan detail di baris mana kesalahannya
7

Mengelola Daftar Soal

Setelah soal ditambahkan (manual atau CSV), semua soal akan muncul di section "📋 Questions List".

Fitur yang Tersedia:

✏ī¸ Edit Soal

Klik tombol "Edit" untuk mengubah soal. Data akan terisi otomatis di form, edit, lalu klik "Update".

🗑ī¸ Delete Soal

Klik tombol "Delete" untuk menghapus soal. Akan ada konfirmasi sebelum dihapus.

👀 Preview

Setiap soal ditampilkan lengkap dengan jawaban yang benar ditandai dengan ✓ hijau.

📊 Counter

Di header section ada counter "Questions List (X)" yang menunjukkan jumlah total soal.

💡 Tips Manajemen Soal:

  • Periksa urutan soal - soal akan muncul di ujian sesuai urutan yang Anda tambahkan
  • Gunakan fitur Edit untuk memperbaiki typo tanpa perlu hapus dan input ulang
  • Minimal harus ada 1 soal sebelum bisa download ujian
8

Save & Load Soal

Fitur penting untuk menyimpan pekerjaan Anda dan menggunakannya lagi di kemudian hari.

💾 Save Questions to File

  1. Klik tombol "💾 Save Questions to File" di bagian atas
  2. File JSON akan terdownload otomatis
  3. Nama file: [Judul_Ujian]_Questions.json
  4. File ini berisi semua soal + setting ujian

📂 Load Questions from File

  1. Klik tombol "📂 Load Questions from File"
  2. Pilih file JSON yang pernah Anda save sebelumnya
  3. Jika sudah ada soal, akan ada konfirmasi apakah mau replace atau tidak
  4. Semua soal dan setting akan otomatis terisi

ℹī¸ Kegunaan Fitur Ini:

  • Backup: Simpan soal ujian sebagai arsip
  • Reusable: Gunakan soal yang sama untuk kelas lain atau tahun depan
  • Sharing: Berbagi soal dengan guru lain
  • Version Control: Buat beberapa versi soal ujian
9

Download File Ujian untuk Siswa

Setelah semua soal siap, langkah terakhir adalah membuat file ujian untuk siswa:

  1. Pastikan semua terisi:
    • Exam Title ✓
    • Duration ✓
    • Class/Grade ✓
    • Minimal 1 soal ✓
  2. Scroll ke bawah ke section "âŦ‡ī¸ Download Exam"
  3. Klik tombol hijau "💾 Download Exam File"
  4. File HTML akan terdownload dengan nama: [Judul_Ujian]_Exam.html

✅ File Ujian Siswa Berisi:

  • Semua soal yang Anda buat
  • Timer countdown otomatis
  • System fullscreen enforcement
  • Anti-cheating mechanism (deteksi tab switching)
  • QR Code generator untuk hasil ujian
  • Form input nama, NIS, dan kelas siswa

⚠ī¸ Catatan Penting:

  • File ujian adalah file HTML tunggal - sangat mudah didistribusikan
  • Bisa dikirim via WhatsApp, Email, Google Classroom, atau USB
  • Siswa tidak perlu internet untuk mengerjakan (offline-capable)
  • File ini sudah include sistem keamanan untuk mencegah kecurangan
10

Distribusi ke Siswa

Cara Mendistribusikan File Ujian:

📱 WhatsApp

Kirim file HTML via WhatsApp Group kelas. Siswa download dan buka di browser HP.

📧 Email

Kirim sebagai attachment email ke siswa atau orang tua.

🌐 Google Classroom

Upload sebagai material di Google Classroom assignment.

💾 USB / Cloud

Copy ke USB atau upload ke Google Drive / Dropbox untuk sharing.

Instruksi untuk Siswa:

📋 Langkah-langkah Siswa Mengerjakan:

  1. Download file ujian dari sumber yang diberikan guru
  2. Buka file dengan browser (klik 2x atau klik kanan > Open with > Chrome)
  3. Isi Nama Lengkap, NIS, dan Kelas
  4. Klik "🚀 Mulai Ujian"
  5. Layar akan fullscreen otomatis
  6. Kerjakan semua soal dengan teliti
  7. Gunakan tombol navigasi untuk berpindah soal
  8. Tandai "❓ Ragu-ragu" untuk soal yang masih diragukan
  9. Setelah selesai, klik "✅ Submit Ujian"
  10. Screenshot QR Code hasil ujian dan kirim ke guru

⚠ī¸ Peringatan untuk Siswa:

  • Jangan keluar dari fullscreen - akan tercatat sebagai pelanggaran
  • Jangan switch tab/aplikasi - akan tercatat sebagai pelanggaran
  • Jangan refresh halaman - progress akan hilang
  • Pastikan baterai cukup sebelum memulai ujian
  • Screenshot QR Code segera setelah submit
11

Tips & Best Practices

💡 Tips Pembuatan Soal:

  • Gunakan bulk upload untuk soal > 10 agar lebih efisien
  • Beri nama file CSV dengan jelas, misal: "Matematika_UTS_KLS11.csv"
  • Compress gambar jika ukuran file ujian terlalu besar
  • Test file ujian sendiri dulu sebelum dibagikan ke siswa
  • Simpan file JSON sebagai backup permanent

✅ Best Practices:

  • Konsisten dalam penomoran: Gunakan format yang sama untuk semua soal
  • Double check jawaban: Pastikan jawaban benar sudah tercentang dengan tepat
  • Test berbagai device: Coba buka di HP dan laptop untuk memastikan tampilan OK
  • Buat instruksi jelas: Berikan panduan tertulis ke siswa sebelum ujian
  • Backup rutin: Save file JSON setiap kali selesai mengedit soal

⚠ī¸ Hal yang Harus Dihindari:

  • ❌ Jangan edit file HTML ujian secara manual - bisa merusak sistem
  • ❌ Jangan upload gambar terlalu besar (>5MB) - akan membuat file ujian lambat
  • ❌ Jangan lupa save sebelum close browser - progress bisa hilang
  • ❌ Jangan distribusi file terlalu dekat dengan waktu ujian - beri waktu siswa untuk download

📱 QR Scanner Dashboard

v5.1 FIXED

Dashboard Scanning dan Pengolahan Hasil Ujian

1

Pengenalan QR Scanner Dashboard

QR Scanner Dashboard adalah aplikasi pasangan Smart Exam Manager yang digunakan untuk mengumpulkan dan mengolah hasil ujian siswa melalui pemindaian QR Code.

ℹī¸ Apa itu QR Code Hasil Ujian?

Setelah siswa selesai mengerjakan ujian, sistem akan generate QR Code yang berisi:

  • Nama siswa
  • NIS (Nomor Induk Siswa)
  • Kelas
  • Nilai ujian (dalam persen)
  • Jumlah jawaban benar/total soal
  • Jumlah pelanggaran
  • Timestamp (waktu selesai ujian)
📸 Camera Scan

Scan QR Code langsung dari layar smartphone siswa menggunakan camera laptop/HP

📤 Upload Image

Upload screenshot QR Code yang dikirim siswa via WhatsApp/Email

📊 Auto Statistics

Statistik kelas otomatis: rata-rata, tertinggi, terendah

đŸ“Ĩ Export Excel

Export semua hasil ke format CSV/Excel untuk pengolahan lebih lanjut

2

Membuka QR Scanner Dashboard

  1. Buka file https://bit.ly/SMART_TEACHER_APPS dengan browser
  2. Anda akan melihat halaman dengan header "📱 QR Code Scanner Dashboard"
  3. Di bagian atas ada notifikasi hijau "✅ UPDATED: Now supports new QR code format"

✅ Tampilan Dashboard:

Dashboard terdiri dari beberapa section:

  • Scan QR Code: Area untuk scanning/upload QR
  • Statistics Overview: 4 kartu statistik (Total, Average, Highest, Lowest)
  • Student Results: Tabel hasil semua siswa
Tampilan QR Scanner Dashboard dengan gradient biru-ungu dan kartu statistik
3

Metode Scanning QR Code

Metode 1: Camera Scanner (Scanning Langsung)

  1. Klik tombol "📷 Start Camera Scanner"
    • Browser akan meminta izin akses camera
    • Klik "Allow" untuk memberikan izin
  2. Arahkan camera ke QR Code
    • Bisa dari layar HP siswa langsung
    • Atau dari print-out QR Code
    • Pastikan QR Code terlihat jelas di camera
  3. Scanning Otomatis
    • Sistem akan otomatis detect dan scan QR Code
    • Setelah berhasil, camera akan berhenti
    • Data akan langsung masuk ke tabel hasil

💡 Tips Camera Scanning:

  • Pencahayaan cukup: Pastikan ruangan cukup terang
  • Steady camera: Tahan camera dengan stabil
  • Jarak ideal: 15-30 cm dari layar
  • Fokus QR Code: Pastikan QR Code memenuhi frame camera

Metode 2: Upload QR Code Image

Metode ini cocok jika siswa mengirim screenshot QR Code via WhatsApp/Email.

  1. Scroll ke "📤 Or Upload QR Code Image"
  2. Klik "Choose Files" dan pilih gambar QR Code
  3. Klik tombol hijau "✅ Process QR Code"
  4. Tunggu proses - sistem akan otomatis decode QR
  5. Data akan masuk ke tabel hasil jika berhasil

ℹī¸ Format Gambar yang Didukung:

  • JPG / JPEG
  • PNG
  • BMP
  • Screenshot dari HP siswa
  • Foto QR Code dari camera HP

⚠ī¸ Troubleshooting QR Tidak Terbaca:

  • ❌ Gambar terlalu blur → Minta siswa kirim ulang dengan fokus lebih baik
  • ❌ QR Code terpotong → Pastikan seluruh QR Code ada di gambar
  • ❌ Resolusi terlalu rendah → Minta siswa screenshot dengan kualitas tinggi
  • ❌ File corrupt → Coba convert gambar ke format PNG dulu
4

Memahami Data Hasil Scan

Setelah QR Code berhasil di-scan, data akan muncul di tabel "📊 Student Results":

Kolom Keterangan
Name Nama lengkap siswa
NIS Nomor Induk Siswa
Class Kelas siswa
Exam Judul ujian yang dikerjakan
Score Nilai dalam persen (dengan color coding)
Correct Jumlah jawaban benar
Total Total jumlah soal
Violations Jumlah pelanggaran (tab switching, dll)
Date Tanggal dan jam selesai ujian

🎨 Color Coding Nilai:

  • Hijau (85-100): Excellent
  • Biru (70-84): Good
  • Kuning (60-69): Average
  • Merah (<60): Poor

✅ Duplicate Detection:

Sistem otomatis mendeteksi jika siswa yang sama sudah pernah di-scan:

  • Akan muncul konfirmasi "Result already exists"
  • Anda bisa pilih: Replace (timpa data lama) atau Cancel (batal)
  • Ini mencegah data ganda untuk siswa yang sama
5

Statistik Otomatis

Dashboard menampilkan 4 kartu statistik yang update otomatis setiap kali ada data baru:

đŸ‘Ĩ Total Students

Jumlah total siswa yang sudah di-scan hasilnya

📊 Average Score

Rata-rata nilai kelas (pembulatan ke integer)

🏆 Highest Score

Nilai tertinggi di kelas

📉 Lowest Score

Nilai terendah di kelas

💡 Menggunakan Statistik:

  • Monitor real-time: Lihat statistik update saat scanning siswa
  • Evaluasi kesulitan: Jika rata-rata rendah, mungkin soal terlalu sulit
  • Identifikasi outliers: Cek gap antara highest dan lowest
  • Decision making: Gunakan data untuk remidi atau pengayaan
6

Filter dan Search Data

Dashboard dilengkapi filter untuk memudahkan mencari data tertentu:

🔍 Search Box

  • Ketik nama atau NIS siswa di search box
  • Hasil akan langsung terfilter secara real-time
  • Search tidak case-sensitive

📚 Filter by Class

  • Dropdown akan otomatis terisi dengan list kelas yang ada
  • Pilih kelas tertentu untuk melihat hasil kelas tersebut saja
  • Pilih "All Classes" untuk melihat semua data

ℹī¸ Kombinasi Filter:

Anda bisa kombinasikan search dan class filter sekaligus. Contoh:

  • Filter: Kelas "XI IPA 1" + Search: "Ahmad" = Menampilkan semua Ahmad di kelas XI IPA 1

✅ Tips Efisien:

  • Gunakan search untuk cek apakah siswa tertentu sudah di-scan
  • Filter by class untuk fokus scan satu kelas dulu
  • Clear filter sebelum export untuk dapat data lengkap
7

Export Data ke Excel/CSV

Setelah semua data terkumpul, Anda bisa export ke format Excel untuk:

  • Input ke sistem penilaian sekolah
  • Analisis lebih lanjut dengan formula Excel
  • Backup data permanent
  • Sharing ke kepala sekolah / wali kelas

đŸ“Ĩ Cara Export:

  1. Pastikan filter clear jika ingin export semua data
  2. Klik tombol "📊 Export to Excel"
  3. File CSV akan terdownload dengan nama: Exam_Results_[YYYY-MM-DD].csv
  4. Buka dengan Excel/Google Sheets untuk melihat dan edit data

ℹī¸ Format File CSV:

Kolom Isi Data
NoNomor urut
NameNama siswa
NISNomor Induk
ClassKelas
ExamJudul ujian
ScoreNilai (angka)
CorrectJawaban benar
TotalTotal soal
ViolationsPelanggaran
DateTanggal & waktu

✅ Data Terurut Otomatis:

Data di export akan otomatis terurut berdasarkan nilai (dari tertinggi ke terendah), memudahkan identifikasi peringkat kelas.

8

Mengelola Data Tersimpan

Semua data hasil scan tersimpan otomatis di browser menggunakan LocalStorage.

ℹī¸ Persistent Storage:

  • Auto-save: Setiap scan langsung tersimpan otomatis
  • Persistent: Data tetap ada meskipun browser ditutup
  • Per-browser: Data disimpan di browser yang digunakan
  • No-server: Tidak perlu internet, data di local komputer

⚠ī¸ Backup Data Penting:

  • Lakukan export Excel secara berkala sebagai backup
  • Data bisa hilang jika clear browser data/cache
  • Jika ganti komputer/browser, data tidak akan ikut
  • Selalu export setelah selesai scanning semua siswa

🗑ī¸ Clear All Data

Jika ingin menghapus semua data dan mulai dari awal:

  1. Klik tombol merah "🗑ī¸ Clear All"
  2. Akan ada 2x konfirmasi untuk memastikan
  3. Semua data akan terhapus permanent
  4. Pastikan sudah export dulu sebelum clear!
9

Workflow Pengumpulan Hasil Ujian

Skenario 1: Scanning Langsung (Tatap Muka)

  1. Siswa mengerjakan ujian di kelas (HP/laptop masing-masing)
  2. Setelah selesai, siswa menunjukkan layar hasil (QR Code) ke depan
  3. Guru scan satu per satu menggunakan camera laptop
  4. Proses cepat: ~5-10 detik per siswa
  5. Semua data langsung terekam real-time

Skenario 2: Screenshot via WhatsApp (Remote)

  1. Siswa mengerjakan ujian di rumah
  2. Setelah selesai, siswa screenshot QR Code hasil
  3. Kirim screenshot ke WhatsApp Group kelas atau ke guru
  4. Guru save semua gambar ke folder
  5. Upload satu per satu ke QR Scanner Dashboard

Skenario 3: Hybrid (Kombinasi)

  1. Siswa hadir → scan langsung dengan camera
  2. Siswa izin/sakit → kirim screenshot via WhatsApp
  3. Semua data terkumpul di satu dashboard yang sama

💡 Tips Efisiensi:

  • Buat folder khusus untuk save screenshot dari WhatsApp
  • Rename file dengan nama siswa untuk identifikasi mudah
  • Batch upload jika banyak screenshot sekaligus
  • Cek duplikasi dengan fitur search sebelum scan ulang
10

Troubleshooting & FAQ

❓ Masalah Umum dan Solusi:

Q: Camera tidak muncul / Access denied

A: Pastikan browser memiliki izin akses camera. Cek Settings → Privacy → Camera → Allow untuk browser yang digunakan.

Q: QR Code tidak terbaca

A: Pastikan pencahayaan cukup, QR Code tidak blur, dan seluruh QR Code masuk dalam frame camera.

Q: Data hilang setelah close browser

A: Data seharusnya persistent. Jika hilang, kemungkinan ada setting browser yang auto-clear data. Selalu export backup.

Q: Siswa sudah scan tapi tidak muncul

A: Cek filter - mungkin ada filter class yang aktif. Klik "All Classes" untuk melihat semua data.

Q: Nilai siswa salah / data corrupt

A: QR Code mungkin rusak saat screenshot. Minta siswa kirim ulang screenshot yang lebih jelas.

ℹī¸ Format QR Compatibility:

Dashboard ini support 2 format QR Code:

  • Format Baru (v5.1): Pipe-delimited (lebih compact & reliable)
  • Format Lama: JSON format (untuk backward compatibility)

Anda tidak perlu khawatir tentang perbedaan format - sistem otomatis detect dan decode keduanya!

📖 Teacher's Journal

v7.0 FINAL

Jurnal Pembelajaran Digital untuk Guru

1

Pengenalan Teacher's Journal

Teacher's Journal adalah aplikasi jurnal pembelajaran digital yang membantu guru mendokumentasikan kegiatan mengajar harian secara terstruktur, sistematis, dan mudah diakses.

ℹī¸ Mengapa Perlu Jurnal Digital?

  • Akuntabilitas: Bukti dokumentasi kegiatan pembelajaran
  • Evaluasi: Bahan refleksi dan perbaikan metode mengajar
  • Administrasi: Memenuhi persyaratan administrasi sekolah
  • Efisiensi: Tidak perlu menulis manual, lebih cepat dan rapi
  • Analytics: Tracking produktivitas dan pola mengajar
📊 Dashboard

Statistik real-time: total entries, week/month tracking, day streak

➕ Easy Input

Form input sederhana dengan auto-complete dan validasi

📅 Calendar View

Visualisasi jurnal dalam format kalender interaktif

📈 Reports

Export laporan ke CSV atau PDF untuk dokumentasi

Tampilan hero Teacher's Journal dengan gradient ungu dan informasi creator
2

Membuka dan Navigasi Aplikasi

  1. Buka file SUGENG JURNAL GURU 07 VERSION FINAL.html dengan browser
  2. Halaman akan terbuka dengan header besar "📚 Teacher's Journal"
  3. Anda akan melihat informasi creator di box ungu
  4. Ada 5 tab navigasi di bawahnya

ℹī¸ 5 Tab Utama:

Tab Fungsi
📊 Dashboard Overview statistik dan recent entries
➕ Add Entry Form untuk menambah jurnal baru
📋 Journal Records Lihat semua jurnal dalam table atau calendar
📈 Reports Export dan preview laporan
⚙ī¸ Settings Theme, time period, class management

✅ First Time Setup:

Sebelum mulai menambah jurnal, lakukan setup awal:

  1. Pergi ke tab Settings (⚙ī¸)
  2. Pilih theme favorit (Light/Dark/Pastel)
  3. Set default time jika perlu
  4. Setup akan otomatis tersimpan
3

Setup Time Periods (Jam Pelajaran)

Sebelum menambah jurnal, Anda perlu mendefinisikan periode waktu (jam pelajaran) yang digunakan di sekolah Anda.

Cara Menambah Time Period:

  1. Di tab Add Entry, cari field "Time Period"
  2. Klik tombol "⏰ Manage Periods"
  3. Modal "Time Period Management" akan terbuka
  4. Di field "Add New Time Period", ketik nama periode, contoh:
    • "1-2" (untuk jam ke 1-2)
    • "3rd Period" (untuk jam ke-3)
    • "Morning Block" (untuk blok pagi)
    • "7-9" (untuk jam 7-9)
  5. Klik tombol "Add"
  6. Period akan muncul di list
  7. Ulangi untuk semua periode yang Anda perlukan

💡 Contoh Setup Time Periods:

Untuk jadwal SMA standar (8 jam pelajaran):

  • 1-2 (07:00 - 08:30)
  • 3-4 (08:30 - 10:00)
  • Break (10:00 - 10:15)
  • 5-6 (10:15 - 11:45)
  • 7-8 (12:30 - 14:00)

ℹī¸ Manage Time Periods:

  • Edit: Klik "✏ī¸ Edit" untuk mengubah nama period
  • Delete: Klik "🗑ī¸ Delete" untuk hapus (hati-hati jika sudah digunakan)
  • Usage Count: Melihat berapa kali period digunakan di jurnal
4

Setup Kelas yang Diajar

Selain time periods, Anda juga perlu menambahkan list kelas yang Anda ajar.

Cara Menambah Kelas:

  1. Di tab Add Entry, di field "Class"
  2. Klik tombol "đŸĢ Manage Classes"
  3. Modal "Class Management" akan terbuka
  4. Di field "Add New Class", ketik nama kelas, contoh:
    • "X-1" atau "X IPA 1"
    • "XI-IPA-2"
    • "XII-IPS-1"
  5. Klik tombol "Add"
  6. Kelas akan muncul di list
  7. Tambahkan semua kelas yang Anda ajar

✅ Manfaat Setup Awal:

Dengan setup time periods dan classes di awal:

  • Input jurnal jadi lebih cepat (tinggal pilih dropdown)
  • Data lebih konsisten dan terstruktur
  • Filter dan search lebih akurat
  • Laporan lebih informatif

⚠ī¸ Tips Penamaan:

  • Gunakan format yang konsisten untuk semua kelas
  • Hindari typo - akan sulit difilter nanti
  • Bisa edit/delete nanti jika ada perubahan
5

Menambah Entry Jurnal

Setelah setup selesai, Anda siap menambahkan entry jurnal pertama!

Langkah-langkah:

  1. Pergi ke tab "➕ Add Entry"
  2. Isi Form:
    • Day: Otomatis terisi berdasarkan tanggal (read-only)
    • Date: Pilih tanggal (default: hari ini)
    • Time (AM/PM): Pilih waktu mulai mengajar
    • Time Period: Pilih dari dropdown (1-2, 3-4, dll)
    • Class: Pilih kelas dari dropdown
    • Classroom Activity: Tulis detail kegiatan pembelajaran (WAJIB)
    • Notes: Catatan tambahan (opsional)
  3. Klik "💾 Save Entry"
  4. Konfirmasi akan muncul: "Entry added successfully!"

ℹī¸ Contoh Isi Jurnal:

Classroom Activity:

"Menjelaskan materi Sistem Persamaan Linear Dua Variabel (SPLDV) menggunakan metode grafik. Siswa mengerjakan latihan soal di buku paket halaman 45-47. Diskusi kelompok untuk soal nomor 10."

Notes:

"Beberapa siswa masih kesulitan dengan konsep gradien. Perlu remedial untuk 5 siswa di jam kosong besok."

💡 Tips Menulis Jurnal yang Baik:

  • Specific: Tulis detail kegiatan, bukan hanya "Mengajar materi"
  • Measurable: Sertakan progress: halaman buku, soal nomor berapa, dll
  • Actionable: Catat tindak lanjut yang perlu dilakukan
  • Reflective: Tulis observasi: siswa paham/tidak, kendala, dll

✅ Auto-save & Auto-fill:

  • Form otomatis auto-save setiap 30 detik
  • Tanggal default ke hari ini
  • Time default ke waktu sekarang
  • Day otomatis update saat ganti tanggal
6

Melihat Dashboard & Statistik

Dashboard menampilkan overview kegiatan jurnal Anda dengan visual yang menarik.

📊 Total Entries

Total seluruh jurnal yang pernah dibuat

📅 This Week

Jumlah jurnal minggu ini (reset setiap Minggu)

📆 This Month

Jumlah jurnal bulan ini

đŸ”Ĩ Day Streak

Berapa hari berturut-turut Anda konsisten membuat jurnal

ℹī¸ Recent Entries Section:

Di bawah kartu statistik, ada section "📝 Recent Entries" yang menampilkan 5 jurnal terakhir dengan informasi:

  • Tanggal, hari, waktu, periode, dan kelas
  • Aktivitas pembelajaran
  • Notes (jika ada)

💡 Gunakan Day Streak sebagai Motivasi:

Day Streak membantu Anda konsisten:

  • Target: Minimal 1 jurnal per hari mengajar
  • Challenge: Pertahankan streak selama 30 hari
  • Reward: Dokumentasi lengkap sepanjang semester!
7

Mengelola Records (Table & Calendar View)

Tab "📋 Journal Records" menyediakan 2 cara melihat jurnal Anda:

View 1: Table View (Default)

Menampilkan jurnal dalam bentuk tabel lengkap dengan semua kolom.

🔍 Search

Cari jurnal berdasarkan keyword di aktivitas atau notes

đŸĢ Filter Class

Filter jurnal berdasarkan kelas tertentu

📅 Date Range

Filter berdasarkan range tanggal (Start - End)

🔄 Sort

Klik header kolom untuk sort (Date, Day, Time, dll)

View 2: Calendar View

Menampilkan jurnal dalam format kalender visual.

  1. Klik button "📅 Calendar View"
  2. Kalender bulan ini akan muncul
  3. Tanggal dengan jurnal akan berwarna hijau
  4. Tanggal hari ini berwarna ungu
  5. Klik tanggal untuk melihat detail jurnal hari itu
  6. Gunakan tombol "← Previous" dan "Next →" untuk navigasi bulan

✅ Actions di Table View:

Setiap baris jurnal ada 2 tombol action:

  • ✏ī¸ Edit: Buka modal edit untuk mengubah jurnal
  • 🗑ī¸ Delete: Hapus jurnal (ada konfirmasi)

💡 Tips Penggunaan:

  • Gunakan Table View untuk cari jurnal spesifik atau export
  • Gunakan Calendar View untuk overview visual bulanan
  • Kombinasikan filter untuk analisis detail per kelas/periode
8

Edit dan Delete Entry

✏ī¸ Edit Entry:

  1. Di tab "Journal Records", klik tombol "✏ī¸ Edit" pada jurnal yang ingin diubah
  2. Modal edit akan muncul dengan data terisi otomatis
  3. Fitur Draggable: Anda bisa drag modal ke posisi manapun dengan klik-drag di header modal
  4. Edit field yang perlu diubah
  5. Klik tombol "💾 Update Entry"
  6. Modal akan close dan tabel akan refresh otomatis

ℹī¸ Draggable Modal:

Modal edit bisa dipindah-pindah posisinya dengan cara:

  • Klik dan tahan di area header modal (bagian atas)
  • Drag ke posisi yang diinginkan
  • Berguna jika modal menutupi data yang ingin dilihat

🗑ī¸ Delete Entry:

  1. Di tab "Journal Records", klik tombol "🗑ī¸ Delete"
  2. Akan muncul konfirmasi: "Are you sure?"
  3. Klik "OK" untuk confirm delete
  4. Jurnal akan terhapus permanent

⚠ī¸ Delete Bersifat Permanent:

Sekali dihapus, jurnal tidak bisa dikembalikan. Pastikan:

  • Sudah yakin ingin menghapus
  • Sudah export backup jika perlu
  • Tidak salah klik delete
9

Export Laporan (CSV & PDF)

Tab "📈 Reports" memungkinkan Anda export jurnal untuk dokumentasi atau arsip.

Langkah-langkah Export:

  1. Pilih Time Range:
    • Today - Jurnal hari ini saja
    • This Week - Minggu ini
    • This Month - Bulan ini
    • Last 3 Months - 3 bulan terakhir
    • Last 6 Months - 6 bulan terakhir
    • Custom Range - Pilih tanggal start & end sendiri
  2. Preview: Data yang akan di-export muncul di preview section
  3. Choose Format:
    • "📊 Export CSV": Format Excel/spreadsheet
    • "📄 Export PDF": Format dokumen siap cetak

ℹī¸ Format CSV Export:

File CSV berisi kolom:

  • Date, Day, Time, Period, Class, Activity, Notes
  • Bisa dibuka dengan Excel atau Google Sheets
  • Data terurut berdasarkan tanggal (terbaru ke terlama)
  • Cocok untuk arsip digital atau input ke sistem lain

✅ Format PDF Export:

PDF berisi:

  • Header: "Teacher's Journal Report"
  • Info: Created by Sugeng Mardiyanto, Export Date, Total Entries
  • Detail setiap jurnal dengan format rapi
  • Summary: Total entries, date range, classes involved
  • Siap untuk dicetak atau dikirim sebagai laporan

💡 Best Practices Export:

  • Export rutin: Setiap akhir bulan untuk arsip bulanan
  • Backup: Simpan file CSV sebagai backup di cloud (Google Drive)
  • Laporan resmi: Gunakan PDF untuk submission ke kepala sekolah
  • Analisis: Gunakan CSV untuk analisis di Excel (pivot table, chart, dll)
10

Settings & Customization

⚙ī¸ Tab Settings:

🎨 Theme

3 pilihan theme:

  • ☀ī¸ Light - Terang untuk siang hari
  • 🌙 Dark - Gelap untuk malam hari
  • 🎨 Pastel - Warna lembut dan nyaman
⏰ Default Time

Set waktu default untuk form (misal: jam masuk sekolah 07:00)

💾 Backup & Restore

Export semua data sebagai backup JSON atau import data dari backup

🗑ī¸ Clear All Data

Reset semua data (ada konfirmasi 2x untuk keamanan)

💾 Backup & Restore Data:

Fitur penting untuk keamanan data Anda!

✅ Export Backup:

  1. Di tab Settings, scroll ke "Backup & Restore"
  2. Klik "💾 Export Backup"
  3. File JSON akan terdownload: teacher-journal-backup-[YYYY-MM-DD].json
  4. File ini berisi SEMUA data: entries, classes, time periods, settings
  5. Simpan file ini sebagai backup permanent

ℹī¸ Import Backup:

  1. Klik "📁 Import Backup"
  2. Pilih file backup JSON yang pernah di-export
  3. Konfirmasi: "This will replace all current data"
  4. Semua data akan di-restore ke kondisi saat backup

⚠ī¸ Kapan Perlu Backup?

  • Sebelum clear browser data/cache
  • Sebelum ganti komputer/browser
  • Setiap akhir semester sebagai arsip
  • Rutin setiap bulan untuk berjaga-jaga
11

Tips & Best Practices

💡 Tips Efisiensi:

  • Isi jurnal langsung setelah mengajar - ingatan masih fresh
  • Gunakan template activity - copy-paste untuk kegiatan yang mirip
  • Manfaatkan Notes - untuk hal penting yang perlu follow-up
  • Set reminder - alarm untuk isi jurnal sebelum pulang
  • Konsisten dengan format - memudahkan review nanti

✅ Workflow Harian yang Efektif:

  1. Pagi: Buka aplikasi, cek schedule hari ini
  2. Setelah mengajar: Langsung isi jurnal (5 menit)
  3. Istirahat: Review jurnal yang sudah dibuat
  4. Sore: Lengkapi notes jika ada yang terlupa
  5. Akhir pekan: Review semua jurnal minggu ini

ℹī¸ Keyboard Shortcuts:

  • Ctrl/Cmd + S: Save data manual
  • Ctrl/Cmd + N: Go to Add Entry tab
  • Escape: Close modal yang terbuka

⚠ī¸ Hal yang Harus Dihindari:

  • ❌ Menunda isi jurnal sampai akhir minggu (bisa lupa detail)
  • ❌ Menulis terlalu singkat (kurang informatif untuk evaluasi)
  • ❌ Lupa backup rutin (risiko data hilang)
  • ❌ Clear browser data tanpa backup dulu
12

FAQ & Troubleshooting

❓ Pertanyaan Umum:

Q: Apakah data aman? Bisa hilang tidak?

A: Data tersimpan di LocalStorage browser. Aman selama tidak clear browser data. Untuk extra safety, lakukan export backup rutin.

Q: Bisa diakses dari HP tidak?

A: Bisa! Aplikasi responsive dan mobile-friendly. Bisa digunakan di smartphone, tablet, atau laptop.

Q: Bagaimana jika ganti komputer?

A: Export backup dari komputer lama, lalu import backup di komputer baru. Semua data akan pindah.

Q: Bisa digunakan offline tidak?

A: Ya! Setelah file dibuka pertama kali, aplikasi bisa digunakan tanpa internet. Data tersimpan local.

Q: Berapa lama data bisa tersimpan?

A: Permanent, selama LocalStorage tidak di-clear. Tidak ada batas waktu atau jumlah entries.

Q: Bisa share data dengan guru lain?

A: Ya, export backup JSON atau CSV, lalu share file tersebut. Guru lain bisa import di aplikasi mereka.

ℹī¸ Performance Tips:

  • Aplikasi otomatis auto-save setiap 30 detik
  • Ringan dan fast loading - optimized untuk performance
  • Support 1000+ entries tanpa lag
  • Calendar view efisien untuk navigasi bulan/tahun

📚 Tutorial Lengkap Sistem Aplikasi Pendidikan

Dikembangkan oleh:

Sugeng Mardiyanto

Lead Developer

Rosdiana Amini

Co-Developer

Wahyudi Utomo

Co-Developer

đŸĢ SMA Laboratorium UM

đŸĢ SMAN 1 Widodaren Ngawi

Š 2025 | Sistem Aplikasi Pendidikan Digital